<template>
	<div class="Pwd">
		<h3>修改密码</h3>
		<el-form :model="ruleForm"  status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="旧密码" prop="oldPwd">
		    <el-input type="password" v-model="ruleForm.oldPwd" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="新密码" prop="newPwd">
		    <el-input type="password" v-model="ruleForm.newPwd" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="确认密码" prop="checkPwd">
		    <el-input type="password" v-model="ruleForm.checkPwd"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm()">提交</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		name:'UpdatePwd',
		data() {
			 var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } 
			      };
			      var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.ruleForm.newPwd) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return{
				ruleForm:{
					oldPwd:'',
					newPwd:'',
					checkPwd:'',
				},
				 rules: {
				          oldPwd: [
				            { validator: validatePass, trigger: 'blur' }
				          ],
				          newPwd: [
				            { validator: validatePass, trigger: 'blur' }
				          ],
				          checkPwd: [
				            { validator: validatePass2, trigger: 'blur' }
				          ]
				        }
			}
		},
		methods:{
			submitForm(){
				console.log(this.ruleForm);
				this.$postkv("/api/user/updatePwd",this.ruleForm).then((resp)=>{
					if(resp.data.code == 200){
						this.$message({
							message:resp.data.msg,
							type:'success'
						})
					}else{
						this.$message({
							message:resp.data.msg,
							type:'error'
						})
					}
					this.ruleForm = {};
				})
			}
		}
	}
</script>

<style scoped>
	.Pwd{
		text-align: center;
		width: 50%;
		margin: 20px auto;
	}
	
</style>